<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/situation.css">
    <title>Document</title>
    <style>
        .scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;}
        .scroller{-webkit-overflow-scrolling:touch;}
    </style>
</head>
<body>
    <div class="situation scroller" >

       <div class="boxOuter" id="container">
           <div class="loading">
               下拉刷新数据
           </div>
           <div class="box">
               <div class="top flex flex-pack-justify">
                   <p>
                       <span class="title">房间号：</span>
                       <span class="content">778989</span>
                   </p>
                   <p>
                       <span class="title">圈数：</span>
                       <span class="content">2/2</span>
                   </p>
                   <p>
                       <span class="content">2017-12-17 13:00:00</span>
                   </p>
               </div>
               <div class="bottom flex">
                   <div class="left flex flex-pack-justify">
                       <p>
                           <span class="content">张发财</span>
                           <span class="win">+70</span>
                       </p>
                       <p>
                           <span class="content">张荣耀</span>
                           <span class="win">+70</span>
                       </p>
                       <p>
                           <span class="content">张富贵</span>
                           <span class="loose">-30</span>
                       </p>
                       <p>
                           <span class="content">张花开</span>
                           <span class="loose">-30</span>
                       </p>
                   </div>
                   <div class="right flex-1">

                   </div>
                   <div class="btn" id="btn">

                   </div>
               </div>
           </div>
       </div>

    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
<script>
//    let text = `<div class="box">
//            <div class="top flex flex-pack-justify">
//                <p>
//                    <span class="title">房间号：</span>
//                    <span class="content">778989</span>
//                </p>
//                <p>
//                    <span class="title">圈数：</span>
//                    <span class="content">2/2</span>
//                </p>
//                <p>
//                    <span class="content">2017-12-17 13:00:00</span>
//                </p>
//            </div>
//            <div class="bottom flex">
//                <div class="left flex flex-pack-justify">
//                    <p>
//                        <span class="content">张发财123123123123</span>
//                        <span class="win">+70</span>
//                    </p>
//                    <p>
//                        <span class="content">张荣耀</span>
//                        <span class="win">+70</span>
//                    </p>
//                    <p>
//                        <span class="content">张富贵</span>
//                        <span class="loose">-30</span>
//                    </p>
//                    <p>
//                        <span class="content">张花开</span>
//                        <span class="loose">-30</span>
//                    </p>
//                </div>
//                <div class="right flex-1">
//
//                </div>
//                <div class="btn" id="btn">
//
//                </div>
//            </div>
//        </div>`;
//    let text1 = '';
//    for (var i = 0 ; i < 10 ; i++) {
//        text1 = text1 + `<div class="box">
//            <div class="top flex flex-pack-justify">
//                <p>
//                    <span class="title">房间号：</span>
//                    <span class="content">${i}</span>
//                </p>
//                <p>
//                    <span class="title">圈数：</span>
//                    <span class="content">2/2</span>
//                </p>
//                <p>
//                    <span class="content">2017-12-17 13:00:00</span>
//                </p>
//            </div>
//            <div class="bottom flex">
//                <div class="left flex flex-pack-justify">
//                    <p>
//                        <span class="content name">张发财</span>
//                        <span class="win">+70</span>
//                    </p>
//                    <p>
//                        <span class="content name">张荣耀</span>
//                        <span class="win">+70</span>
//                    </p>
//                    <p>
//                        <span class="content name">张富贵</span>
//                        <span class="loose">-30</span>
//                    </p>
//                    <p>
//                        <span class="content name">张花开</span>
//                        <span class="loose">-30</span>
//                    </p>
//                </div>
//                <div class="right flex-1">
//
//                </div>
//                <div class="btn" id="btn${i}">
//
//                </div>
//            </div>
//        </div>`
//    }
//    document.getElementById('container').innerHTML = text1;
//    let t = document.getElementsByClassName('btn');
//    for (let i = 0;i < t.length; i++) {
//        t[i].addEventListener('click',function(){console.log(i)})
//    }



    var page = 1, //分页码
        off_on = false, //分页开关(滚动加载方法 1 中用的)
        timers = null; //定时器(滚动加载方法 2 中用的)

    //加载数据
    var LoadingDataFn = function() {
        var dom = '';
        for (var i = 0; i < 20; i++) {
            dom += `<div class="box">
            <div class="top flex flex-pack-justify">
                <p>
                    <span class="title">房间号：</span>
                    <span class="content">${i}</span>
                </p>
                <p>
                    <span class="title">圈数：</span>
                    <span class="content">2/2</span>
                </p>
                <p>
                    <span class="content">2017-12-17 13:00:00</span>
                </p>
            </div>
            <div class="bottom flex">
                <div class="left flex flex-pack-justify">
                    <p>
                        <span class="content name">张发财</span>
                        <span class="win">+70</span>
                    </p>
                    <p>
                        <span class="content name">张荣耀</span>
                        <span class="win">+70</span>
                    </p>
                    <p>
                        <span class="content name">张富贵</span>
                        <span class="loose">-30</span>
                    </p>
                    <p>
                        <span class="content name">张花开</span>
                        <span class="loose">-30</span>
                    </p>
                </div>
                <div class="right flex-1">

                </div>
                <div class="btn" id="btn${i}">

                </div>
            </div>
        </div>`;
        }
        $('.boxOuter').append(dom);
        off_on = true; //[重要]这是使用了 {滚动加载方法1}  时 用到的 ！！！[如果用  滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
    };

    //初始化， 第一次加载
    $(document).ready(function() {
        LoadingDataFn();
    });

    //底部切换
    $(document.body).on('click', '#footer div', function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

    //滚动加载方法1
    $('.situation').scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
            //这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
            if (off_on) {
                //off_on = false;
                //page++;
                //console.log("第"+page+"页");
                //LoadingDataFn();  //调用执行上面的加载方法
            }
        }
    });

    //滚动加载方法2
    $('.situation').scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
            clearTimeout(timers);
            //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
            timers = setTimeout(function() {
                page++;
                console.log("第" + page + "页");
                LoadingDataFn(); //调用执行上面的加载方法
            }, 300);
        }
    });

    //还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
    /*$(window).scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                page++;
                console.log("第" + page + "页");
                LoadingDataFn();
            }, 300);
        }
    });*/



var slide = function (option) {
    var defaults={
        container:'',
        next:function(){}
    }
    var start,
        end,
        length,
        isLock = false,//是否锁定整个操作
        isCanDo = false,//是否移动滑块
        hasTouch = 'ontouchstart' in window;
    var obj = document.querySelector(option.container);
    var loading=obj.firstElementChild;
    var offset=loading.clientHeight;
    var objparent = obj.parentElement;

    /*操作方法*/
    var fn =
        {
            //移动容器
            translate: function (diff) {
                obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
                obj.style.transform='translate3d(0,'+diff+'px,0)';
            },
            //设置效果时间
            setTransition: function (time) {
                obj.style.webkitTransition='all '+time+'s';
                obj.style.transition='all '+time+'s';
            },
            //返回到初始位置
            back: function () {
                fn.translate(0 - offset);
                //标识操作完成
                isLock = false;
            },
            addEvent:function(element,event_name,event_fn){
                if (element.addEventListener) {
                    element.addEventListener(event_name, event_fn, false);
                } else if (element.attachEvent) {
                    element.attachEvent('on' + event_name, event_fn);
                } else {
                    element['on' + event_name] = event_fn;
                }
            }
        };

    fn.translate(0-offset);
    fn.addEvent(obj,'touchstart',start);
    fn.addEvent(obj,'touchmove',move);
    fn.addEvent(obj,'touchend',end);
    fn.addEvent(obj,'mousedown',start)
    fn.addEvent(obj,'mousemove',move)
    fn.addEvent(obj,'mouseup',end)

    //滑动开始
    function start(e) {
        if (objparent.scrollTop <= 0 && !isLock) {
            var even = typeof event == "undefined" ? e : event;
            //标识操作进行中
            isLock = true;
            isCanDo = true;
            //保存当前鼠标Y坐标
            start = hasTouch ? even.touches[0].pageY : even.pageY;
            //消除滑块动画时间
            fn.setTransition(0);
            loading.innerHTML='下拉刷新数据';
        }
        return false;
    }

    //滑动中
    function move(e) {
        if (objparent.scrollTop <= 0 && isCanDo) {
            var even = typeof event == "undefined" ? e : event;
            //保存当前鼠标Y坐标
            end = hasTouch ? even.touches[0].pageY : even.pageY;
            if (start < end) {
                even.preventDefault();
                //消除滑块动画时间
                fn.setTransition(0);
                //移动滑块
                if((end-start-offset)/2<=150) {
                    length=(end - start - offset) / 2;
                    fn.translate(length);
                }
                else {
                    length+=0.3;
                    fn.translate(length);
                }
            }
        }
    }
    //滑动结束
    function end(e) {
        if (isCanDo) {
            isCanDo = false;
            //判断滑动距离是否大于等于指定值
            if (end - start >= offset) {
                //设置滑块回弹时间
                fn.setTransition(1);
                //保留提示部分
                fn.translate(0);
                //执行回调函数
                loading.innerHTML='正在刷新数据';
                if (typeof option.next == "function") {
                    option.next.call(fn, e);
                }
            } else {
                //返回初始状态
                fn.back();
            }
        }
    }
}
    slide({container:"#container",next: function (e) {
        //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
        var that = this;
        setTimeout(function () {
            that.back.call();
        }, 2000);
    }});
</script>
</html>
